<template>
    <div>
        <el-form-item label="name属性：" prop="name">
            <el-input v-model="modalFormData.name"></el-input>
        </el-form-item>
        <el-form-item label="控件名称：">
            <el-input v-model="modalFormData.label" placeholder="请输入控件名称" ></el-input>
        </el-form-item>
        <el-form-item label="校验错误：">
            <el-input v-model="modalFormData.ruleError" placeholder="请输入校验错误提示"></el-input>
        </el-form-item>
        <el-form-item label="手动添加：">
            <el-row :gutter="5">
                <el-col :span="10">
                <span>键名</span>
                </el-col>
                <el-col :span="10">
                <span>键值</span>
                </el-col>
                <el-col :span="2" style="text-algin:right;">
                <i @click="addDataList" class="el-icon-circle-plus-outline"></i>
                </el-col>
            </el-row>
            <el-row
                :gutter="10"
                v-for="(item,index) in modalFormData.dataList"
                :key="index"
                style="margin-top:5px;"
            >
                <el-col :span="10">
                <el-input v-model="item.label"></el-input>
                </el-col>
                <el-col :span="10">
                <el-input v-model="item.value"></el-input>
                </el-col>
                <el-col :span="2" style="text-algin:right;">
                <i @click="deleteDataList(index)" class="el-icon-remove-outline"></i>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item label="是否必填：">
            <el-checkbox v-model="modalFormData.require">必填</el-checkbox>
        </el-form-item>
    </div>
</template>
<script>
export default {
    name:'CheckBoxConfig',
    props:{
        modalFormData:{
            type:Object,
            default:()=>{
                return {}
            }
        }
    },
    methods:{
        addDataList() {
            this.modalFormData.dataList.push({ label: null, value: null });
        },
    }
}
</script>